<template>
  <div id="full">
      <div class="fanhui" @click="hui"><span>返 回 上 一 层</span></div>
        <ul>
   <template v-for="(item, index) in list">
    <li :key="item.id" @click="bof(item.id)">
     <div class="content">
      <div class="num">{{ index + 1 > 9 ?  index+1 : ('0' + (index+1))}}</div>
      <div class="content_text">
       <div class="text_1">
        <div class="text_a">{{ item.name }}</div>
        <div class="text_b">{{ item.ar[0].name }}-{{ item.name }}</div>
       </div>
       <div class="text_2">
        <i class="iconfont icon-bofang" style="font-size: 20px; color: #c1c1c1">
        </i>
       </div>
      </div>
     </div>
     <!-- <h1>{{index+1}}</h1>
          <h1>{{item.name}}</h1>
          <h1>{{item.ar[0].name}}</h1> -->
    </li>
   </template>
  </ul>
  </div>
</template>

<script>
export default {
 async mounted() {
  let res = await this._axios.get("/playlist/detail?id=3778678");
  console.log(res.data.playlist.tracks);
  this.list = res.data.playlist.tracks;
  console.log(this.list);
 },
 data: () => {
  return {
   list: [],
  };
 },
 methods:{
     hui(){
       this.$router.push({name:'hot'})
     },
       bof(id) {
   this.$router.push({ name: "bo", query: { id } });
  },
 }
}
</script>

<style lang='scss' scoped>
#full{
    .fanhui{
height: _vw(110);
text-align: center;
line-height: _vw(110);
background-color: red;
color: #fff;
    }
     .content {
  // position: relative;
  height: _vw(110);
  display: flex;
  justify-content: space-around;
  align-items: center;
  .num {
   width: _vw(20);
   font-size: _vw(35);
   // color: red;
   color: #888;
   margin-right: _vw(20);
  }
  .content_text {
   width: _vw(650);
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #c1c1c1;
   vertical-align: top;
   align-items: center;

   .text_a {
    font-size: _vw(28);
    color: #333333;
   }
   .text_b {
    font-size: _vw(24);
    margin-bottom: 10px;
    color: #888;
   }
  }
 }
}
</style>